<template>
    <div v-if="active" class="full-percent">

        <div style="display: flex;">
            <div style="width: 100px;padding-right: 10px;text-align: right;">数据流向:</div>
            <div>
                <span>{{ config.reader.dbType + "@" + config.reader.dbName }}</span>
                <span> ==========> </span>
                <span>{{ config.writer.dbType + "@" + config.writer.dbName }}</span>
            </div>
        </div>

        <div v-waterfall="300" style="padding: 10px;">
            <el-card shadow="never" v-for="reader in Object.keys(config.writer.tableMapping)" class="mapping-card">
                <div style="display: flex;">
                    <div class="label">任务名称</div>
                    <tooltip :modelValue="etlConfig[reader].taskName" style="width: calc(100% - 65px)!important;" />
                </div>
                <div style="display: flex;">
                    <div class="label">表输入</div>
                    <tooltip :modelValue="reader" style="width: calc(100% - 65px)!important;" />
                </div>
                <div style="display: flex;">
                    <div class="label">表输出</div>
                    <tooltip :modelValue="config.writer.tableMapping[reader]"
                        style="width: calc(100% - 65px)!important;" />
                </div>
                <div style="display: flex;">
                    <div class="label">映射列数</div>
                    <tooltip :modelValue="etlConfig[reader].in.column.split(';').length"
                        style="width: calc(100% - 65px)!important;">
                    </tooltip>
                </div>
                <div style="display: flex;">
                    <div class="label">前置SQL</div>
                    <tooltip :modelValue="etlConfig[reader].front.sql" style="width: calc(100% - 65px)!important;"
                        placeholder="未设置前置SQL" show-tips />
                </div>
                <div style="display: flex;">
                    <div class="label">后置SQL</div>
                    <tooltip :modelValue="etlConfig[reader].rear.sql" style="width: calc(100% - 65px)!important;"
                        placeholder="未设置后置SQL" />
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    config: {
        type: Object,
        required: true,
        default: {}
    },
    active: {
        type: Boolean,
        required: false,
        default: false
    },
    etlConfig: {
        type: Object,
        required: true,
        default: {}
    }
})
</script>

<style>
.mapping-card {
    width: 300px;
}

.mapping-card .el-card__body {
    padding: 5px;
}

.mapping-card .label {
    width: 65px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>